<template>  
    <div class="sociecty">  
        	<!--置顶类型-->
<section v-for="item in sociectyList" v-if="item.label===`置顶`">
			<div class="item_detail">
					<h3 class="item_title">
						{{item.title}}
					</h3>
					<div class="item_info">
						<ul>
							<li class="label">{{item.label}}</li>
							<li class="source">{{item.source}}</li>
							<li class="comment">评论  {{item.comment_count}}</li>
							<li class="time">2小时前</li>
						</ul>
					</div>
				</div>
		</section>
		<!--三图并且不是广告类型-->
<section v-else-if="item.image_list.length===3&&item.label!=`广告`">
			<div class="item_detail">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_pic">
					<ul>
						<li v-for="item2 in item.image_list"><img :src="item2.url" alt="" /></li>
					</ul>
				</div>
				<div class="item_info">
					<ul>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
					</ul>
				</div>
				
			</div>
		</section>
		<!--广告无图-->
	<section v-else-if="item.has_image===false&&item.label===`广告`">
			<div class="item_detail">
				<h3 class="item_title">
					开放的大门不会关上
				</h3>
				<div class="item_info">
					<ul>
						<li class="ad_label">广告</li>
						<li class="source">央视网新闻</li>
						<li class="comment">评论  375</li>
						<li class="time">2小时前</li>
					</ul>
				</div>
			</div>
		</section>
		<!--三图广告类型-->
<section v-else-if="item.label===`广告`&&item.image_list.length===3&&item.has_image===true">
			<div class="item_detail">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_pic">
					<ul>
						<li v-for="item2 in item.image_list"><img :src="item2.url" alt="" /></li>
					</ul>
				</div>
				<div class="item_info">
					<ul>
						<li class="ad_label">广告</li>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
						<li class="time">2小时前</li>
					</ul>
				</div>
			</div>
		</section>
		
		<!--无图全文字型-->
<section v-else-if="item.image_list.length===0&&item.has_image===false">
			<div class="item_detail">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_info">
					<ul>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
						<li class="time">2小时前</li>
					</ul>
				</div>
			</div>
		</section>
		
		<!--单图类型-->
		<section v-else-if="item.image_list.length===0&&item.has_image===true
">
			<div class="item_detail pd wth">
				<h3 class="item_title">
					{{item.title}}
				</h3>
				<div class="item_info">
					<ul>
						<li class="source">{{item.source}}</li>
						<li class="comment">评论  {{item.comment_count}}</li>
					</ul>
				</div>
				
			</div>
			<div class="item_img">
				<img :src="item.image_url"/>
			</div>
		</section>
    </div>
</template>  

<script>  
	import axois from 'axios';
	let doc = "";
	const listNum = 7;
	export default{
		mounted(){
			this._getSoc();
			this.scroll_add();
			this._initAjax()
		},
		data(){
			return {
				sociectyList:[],
				contentList:[]
			}
		},
		methods:{
			_getSoc(){
//				var url = "/society?rid=1"
//				console.log(url)
				axois({
					methods:'get',
					url:'/society',
					params:{
						rid:1
					}
				}).then((res)=>{
					this.sociectyList = res.data.data;
//					console.log(this.sociectyList[0].has_image)
				})
			},
			scroll_add(){
//				doc = document.documentElement||document.body;
				let _this = this;
				$(window).scroll(function(){
					let scrollTop = $(this).scrollTop()
					let scrollHeight = $(document).height()
					let windowHeight = $(this).height()
					if(scrollTop + windowHeight === scrollHeight){
						_this._showList();
					}
				})
			},
			_initAjax(){
//				var url = "/society?rid=2"
				axois({
					methods:'get',
					url:'/society',
					params:{
						rid:2
					}
				}).then((res)=>{
					this.contentList = res.data.data
				}).then(()=>{this._showList()})
			},
			_showList(){
				let con = this.contentList.splice(0,listNum)
				this.sociectyList = this.sociectyList.concat(con)
			}
		}
	}
</script>  

<style lang="scss">  
    .sociecty{
    	padding: 0 4.5%;
		padding-top: 84px;
    	
    }
</style>